@babel/plugin-transform-computed-properties

What is @babel/plugin-transform-computed-properties?

The @babel/plugin-transform-computed-properties npm package is a plugin for Babel that transforms computed property names in objects. This allows you to use expressions to define property names in your objects, which are evaluated at runtime.

What are @babel/plugin-transform-computed-properties's main functionalities?

Computed Property Names

This feature allows you to use expressions inside square brackets to compute property names for objects. The expression inside the brackets is evaluated and the result is used as the property name.

{"var obj = {['foo' + bar]: 'baz'};"}

Other packages similar to @babel/plugin-transform-computed-properties

@babel/plugin-transform-spread

This plugin allows Babel to transform the spread operator in arrays and function calls. While it does not directly relate to computed properties, it is another example of a Babel plugin that transforms modern JavaScript syntax into a form compatible with older environments.

@babel/plugin-proposal-object-rest-spread

Similar to the spread transform plugin, this one is for transforming object rest and spread properties. It does not handle computed properties, but it is related in the sense that it deals with object property manipulation.

@babel/plugin-transform-destructuring

This plugin transforms destructuring assignments and rest properties for more consistent code. It does not provide the same functionality as the computed properties plugin but is another tool for handling object properties.

README

@babel/plugin-transform-computed-properties

Compile ES2015 computed properties to ES5

See our website @babel/plugin-transform-computed-properties for more information.

Install

Using npm:

npm install --save-dev @babel/plugin-transform-computed-properties

or using yarn:

yarn add @babel/plugin-transform-computed-properties --dev

Changelog

v7.25.9 (2024-10-22)

:bug: Bug Fix

• babel-parser, babel-template, babel-types
  • #16905 fix: Keep type annotations in syntacticPlaceholders mode (@liuxingbaoyu)
• babel-helper-compilation-targets, babel-preset-env
  • #16907 fix: support BROWSERSLIST{,_CONFIG} env (@JLHwung)
• Other
  • #16884 Analyze ClassAccessorProperty to prevent the no-undef rule (@victorenator)

:house: Internal

• babel-helper-transform-fixture-test-runner
  • #16914 remove test options flaky (@JLHwung)

:running_woman: Performance

• babel-parser, babel-types
  • #16918 perf: Make VISITOR_KEYS etc. faster to access (@liuxingbaoyu)